<template>
  <div class="container">
    <ul class="news-nav">
      <li v-for="news of newsInfos" :key="news.id">
        <!-- 使用编程式导航实现 RouterLink 效果 -->
        <button class="news-button" @click="jumpTo(news)">
          {{ news.title }}
        </button>
        <!-- <RouterLink
          :to="{
            // path: '/news/detail', // 这样是不能正常跳转的
            name: 'newsDetail',
            params: {
              id: news.id,
            },
            query: {
              title: news.title,
              content: news.content,
            },
          }"
          style="width: 100%; display: inline-block"
          active-class="active"
          >{{ news.title }}</RouterLink
        > -->
      </li>
    </ul>
    <div class="news-content">
      <RouterView />
    </div>
  </div>
</template>

<script setup lang="ts">
import { RouterView, useRouter } from "vue-router";
interface News {
  id: string;
  title: string;
  content: string;
}
const newsInfos: News[] = [
  {
    id: "a",
    title: "东方太阳是什么",
    content: "东方太阳是一个托塔马克核反应堆。XXXX",
  },
  {
    id: "b",
    title: "微尺度实验室是干什么的",
    content: "微尺度实验室专门研究量子方面的内容",
  },
  {
    id: "c",
    title: "计算机学院有哪些专业",
    content:
      "计算机学院的专业包括计算机技术、信息安全、软件工程、人工智能、大数据等",
  },
];

const router = useRouter();
function jumpTo(news: News) {
  router.replace({
    name: "newsDetail",
    params: {
      id: news.id,
    },
    query: {
      title: news.title,
      content: news.content,
    },
  });
}
</script>

<style scoped>
.active {
  color: green;
}
.container {
  display: flex;
}
.news-nav {
  background-color: #00bfffaa;
  width: 20%;
  padding: 10px;
  margin: 0;
}
.news-nav li {
  margin: 20px;
  list-style: none;
  border: gray 2px solid;
  padding: 5px 20px;
}
.news-content {
  width: 80%;
  background-color: pink;
}
</style>
